<div id="login" class="login-box">
    <div class="login-box-body">
        <p class="login-box-msg">用户名密码登录</p>
        <form method="post" id="fm1" th:object="${credential}" action="login">
            <div class="alert alert-danger" th:if="${#fields.hasErrors('*')}">
                <span th:each="err : ${#fields.errors('*')}" th:utext="${err}"/>
            </div>

            <h2 th:utext="#{screen.welcome.instructions}"></h2>

            <div class="form-group has-feedback">
                <div th:if="${openIdLocalId}">
                    <strong>
                        <span th:utext="${openIdLocalId}"/>
                    </strong>
                    <input type="hidden"
                           id="username"
                           name="username"
                           th:value="${openIdLocalId}"/>
                </div>
                <div th:unless="${openIdLocalId}">
                    <input class="required form-control"
                           id="username"
                           size="25"
                           tabindex="1"
                           type="text" th:placeholder="#{screen.welcome.label.netid}"
                           th:disabled="${guaEnabled}"
                           th:field="*{username}"
                           th:accesskey="#{screen.welcome.label.netid.accesskey}"
                           autocomplete="off"/>
                    <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
                </div>
            </div>
            <div class="form-group">
                            <span th:if="${availableAuthenticationHandlerNames != null}">
                                <span th:if="${availableAuthenticationHandlerNames.size() > 1}">
                                    <label for="source" th:utext="#{screen.welcome.label.source}">Source</label>
                                    <div>
                                        <select class="form-control required"
                                                id="source"
                                                name="source"
                                                tabindex="0"
                                                th:field="*{source}">
                                            <option th:each="handler : ${availableAuthenticationHandlerNames}" th:value="${handler}" th:text="${handler}">Source</option>
                                        </select>
                                    </div>
                                </span>
                                <span th:if="${availableAuthenticationHandlerNames.size() == 1}">
                                     <input type="hidden"
                                            id="source"
                                            name="source"
                                            th:value="${availableAuthenticationHandlerNames.get(0)}"/>
                                </span>
                            </span>
            </div>

            <div class="form-group has-feedback">
                <div>
                    <input class="required form-control"
                           type="password"
                           id="password"
                           size="25"
                           tabindex="2" th:placeholder="#{screen.welcome.label.password}"
                           th:accesskey="#{screen.welcome.label.password.accesskey}"
                           th:field="*{password}"
                           autocomplete="off"/>
                    <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                    <span id="capslock-on" style="display:none;">
                        <p>
                            <i class="fa fa-exclamation-circle"></i>
                            <span th:utext="#{screen.capslock.on}"/>
                        </p>
                    </span>
                </div>
            </div>
<!--
            <section class="row check">
                <p th:if="${passwordManagementEnabled}">
                    <input type="checkbox" name="doChangePassword" id="doChangePassword" value="true" th:checked="${param.doChangePassword != null}" tabindex="4"/>
                    <label for="doChangePassword" th:text="#{screen.button.changePassword}"/>
                </p>
            </section>
-->
            <section class="row check">
                <p th:if="${rememberMeAuthenticationEnabled}">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" name="rememberMe" id="rememberMe" value="true" tabindex="5"> 记住我
                        </label>
                    </div>
                </p>
            </section>

            <!--<section class="row check">-->
                <!--<div th:if="${rememberMeAuthenticationEnabled}" class="checkbox icheck">-->
                    <!--<label for="rememberMe">-->
                        <!--<input type="checkbox" name="rememberMe"  id="rememberMe" value="true" tabindex="5"/>-->
                        <!--<font th:text="#{screen.rememberme.checkbox.title}"></font>-->
                    <!--</label>-->
                <!--</div>-->
            <!--</section>-->

            <section class="row" th:if="${recaptchaSiteKey}">
                <div class="g-recaptcha" th:attr="data-sitekey=${recaptchaSiteKey}"/>
            </section>

            <section class="row btn-row">
                <input type="hidden" name="execution" th:value="${flowExecutionKey}"/>
                <input type="hidden" name="_eventId" value="submit"/>
                <input type="hidden" name="geolocation"/>

                <input class="btn btn-submit btn-block btn-flat"
                       name="submit"
                       accesskey="l"
                       th:value="#{screen.welcome.button.login}"
                       tabindex="6"
                       type="submit"/>
            </section>
        </form>

        <form th:if="${passwordManagementEnabled}" method="post" id="passwordManagementForm">
            <input type="hidden" name="execution" th:value="${flowExecutionKey}"/>
            <input type="hidden" name="_eventId" value="resetPassword"/>
            <span class="fa fa-unlock"></span>
            <a th:utext="#{screen.pm.button.resetPassword}" href="javascript:void(0)" onclick="$('#passwordManagementForm').submit();"/>
            <p/>
        </form>

        <div th:unless="${passwordManagementEnabled}">
            <span class="fa fa-question-circle"></span>
            <span th:utext="#{screen.pm.button.forgotpwd}"/>
            <p/>
        </div>

        <div class="social-auth-links text-center" th:if="${pac4jUrls}">
                <div id="list-providers">
                    <p th:utext="#{screen.welcome.label.loginwith}"/>

                            <a th:each="entry: ${pac4jUrls}" th:switch="${entry.type}" class="btn btn-block btn-social btn-flat"
                               th:classappend="'btn-' + ${entry.type}"
                               th:href="${entry.redirectUrl}"
                               th:inline="text"
                               th:title="${entry.name}">

                                <span th:case="twitter" class="fa fa-twitter-square"></span>
                                <span th:case="foursquare" class="fa fa-foursquare"></span>
                                <span th:case="windowslive" class="fa fa-windows"></span>
                                <span th:case="yahoo" class="fa fa-yahoo"></span>
                                <span th:case="bitbucket" class="fa fa-bitbucket"></span>
                                <span th:case="wordpress" class="fa fa-wordpress"></span>
                                <span th:case="google2" class="fa fa-google-plus"></span>
                                <span th:case="github" class="fa fa-github-alt"></span>
                                <span th:case="dropbox" class="fa fa-dropbox"></span>
                                <span th:case="linkedin" class="fa fa-linkedin"></span>
                                <span th:case="facebook" class="fa fa-facebook-square"></span>
                                <span th:case="oidc" class="fa fa-openid"></span>
                                <span th:case="saml2" th:class="${entry.cssClass}"></span>
                                <span th:case="*" class="fa fa-sign-in"></span>

                                [[${entry.name}]]
                            </a>

                </div>
        </div>

    </div>

    <script type="text/javascript" th:inline="javascript">
        var i = [[#{screen.welcome.button.loginwip}]]
        $("#fm1").submit(function () {
            $(":submit").attr("disabled", true);
            $(":submit").attr("value", i);
            return true;
        });
    </script>
    <div th:replace="fragments/loginsidebar"/>
</div>